<template>
    <!-- 【新增】 -->
  <Header @open-auth-modal="isAuthModalVisible = true" />
  <AuthModal v-if="isAuthModalVisible" @close="isAuthModalVisible = false" />

  <!-- 1. 添加与曲库页相同的 .page-container -->
  <view class="page-container" style="padding-top: 60px;">
    <!-- 2. 原有的 .category-page 现在是内容区 -->
    <view class="category-page">
      <!-- 左侧分类导航 -->
      <view class="left-nav">
        <view
          v-for="category in categories"
          :key="category.key"
          class="nav-item"
          :class="{ active: currentCategoryKey === category.key }"
          @click="selectCategory(category.key)"
        >
          {{ category.name }}
        </view>
      </view>

      <!-- 右侧详情内容区 -->
      <view class="right-content">
        <component
          :is="currentComponent"
          v-bind="currentComponentProps"
          @item-click="handleItemClick"
        />
      </view>
    </view>
    <Player v-if="playerStore.showPlayer" />
  </view>
</template>


<script setup>
import { computed, markRaw, ref } from "vue";
import { usePlayerStore } from "@/store/player";
import { useSearchStore } from "@/store/search";
import { useAuthStore } from "@/store/auth"; // 【核心修改1】导入 authStore
import { request } from "@/utils/request"; // 【核心修改2】导入 request

import ArtistList from "@/components/CategoryDetails/ArtistList.vue";
import DateList from "@/components/CategoryDetails/DateList.vue";
import LanguageList from "@/components/CategoryDetails/LanguageList.vue";
import StatusList from "@/components/CategoryDetails/StatusList.vue";
import TypeList from "@/components/CategoryDetails/TypeList.vue";
import Player from "@/components/Player.vue";
import Header from '@/components/Header/Header.vue';
import AuthModal from '@/components/AuthModal/AuthModal.vue';

const searchStore = useSearchStore();
const playerStore = usePlayerStore();
const authStore = useAuthStore(); // 【核心修改3】获取实例
const isAuthModalVisible = ref(false);

const categories = ref([
  {
    key: "coverArtists",
    name: "小偶像",
    component: markRaw(ArtistList),
    searchType: "artist",
    props: { role: "cover" },
  },
  {
    key: "allArtists",
    name: "所有歌手",
    component: markRaw(ArtistList),
    searchType: "artist",
    props: { role: "" },
  },
  {
    key: "languages",
    name: "语种",
    component: markRaw(LanguageList),
    searchType: "language",
  },
  {
    key: "dates",
    name: "日期",
    component: markRaw(DateList),
    searchType: "date",
  },
  {
    key: "statuses",
    name: "状态",
    component: markRaw(StatusList),
    searchType: "status",
  },
  {
    key: "types",
    name: "是否原创",
    component: markRaw(TypeList),
    searchType: "song_type",
  },
]);

const currentCategoryKey = ref("coverArtists");

// --- 【核心修改4】将 uni.request 替换为 request ---
// 虽然这些请求是公开的，不需要 token，但为了保持代码统一性，我们依然使用 request 工具。
// ArtistList, DateList 等子组件内部也会使用 request 工具发起自己的请求。

const currentComponent = computed(() => {
  const category = categories.value.find(
    (c) => c.key === currentCategoryKey.value
  );
  return category ? category.component : null;
});

const currentComponentProps = computed(() => {
  const category = categories.value.find(
    (c) => c.key === currentCategoryKey.value
  );
  return category && category.props ? category.props : {};
});

const selectCategory = (key) => {
  const category = categories.value.find((c) => c.key === key);
  if (category) {
    if (category.component) {
      currentCategoryKey.value = key;
    } else {
      handleDirectSearch(category);
    }
  }
};

const handleItemClick = (itemValue) => {
  const category = categories.value.find(
    (c) => c.key === currentCategoryKey.value
  );
  if (category) {
    searchStore.setPendingSearch(category.searchType, itemValue);
    uni.switchTab({ url: "/pages/index/index" });
  }
};

const handleDirectSearch = (category) => {
  if (category.searchType && category.searchValue) {
    searchStore.setPendingSearch(category.searchType, category.searchValue);
    uni.switchTab({ url: "/pages/index/index" });
  }
};

</script>

<style scoped>
/* 
  核心改动 1：
  添加一个外层容器 .page-container，用于居中和设置背景色
*/
.page-container {
  display: flex;
  justify-content: center;
  width: 100%;

  background-color: #f8f8f8; /* 与曲库页背景色一致 */
}

/* 
  核心改 động 2：
  .category-page 现在是内容区的包装器，我们为它设置最大宽度
*/
.category-page {
  display: flex;
  width: 100%;
  max-width: 800px; /* 与曲库页 .content-wrapper 宽度一致 */
  background-color: #ffffff; /* 内容区使用白色背景 */

  /* 
    高度计算调整：
    我们需要减去 tabBar 的高度，这通常是 50px
    uni-app 也提供了 CSS 变量 --window-bottom
  */
  height: calc(100vh - var(--window-top) - var(--window-bottom));
  margin-block-end: 150px; /* Increased bottom margin */
}

/* --- 以下样式基本保持不变 --- */
.left-nav {
  width: 120px;
  flex-shrink: 0;
  background-color: #f4f4f4;
  height: 100%;
  padding-top: 15px;
  overflow-y: auto;
}

.nav-item {
  padding: 15px 10px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  border-left: 3px solid transparent;
}

.nav-item.active {
  background-color: #ffffff;
  border-left-color: #3cc51f;
  font-weight: bold;
}

.right-content {
  flex-grow: 1;
  height: 100%; /* 让右侧内容区占满父容器的高度 */
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 让子元素垂直排列 */
  overflow: hidden; /* 防止内部内容溢出 */
}
</style>
